<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>四角正方形连线渐变效果</title>
    <style>
        body {
            margin: 0;
            padding: 40px;
            background-color: #1a1a1a;
            font-family: Arial, sans-serif;
        }

        .container {
            width: 400px;
            height: 300px;
            background-color: #2a2a2a;
            position: relative;
            margin: 50px auto;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 18px;
        }

        .title {
            color: #fff;
            text-align: center;
            margin-bottom: 20px;
            font-size: 24px;
            font-weight: bold;
        }

        .method-title {
            color: #f33;
            font-size: 20px;
            margin-bottom: 10px;
            text-align: center;
        }

        /* 方法一：使用SVG实现连线渐变 */
        .svg-method {
            position: relative;
        }

        .svg-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }

        .corner-square {
            position: absolute;
            width: 12px;
            height: 12px;
            background-color: #f33;
            z-index: 2;
        }

        .corner-tl {
            top: -6px;
            left: -6px;
        }

        .corner-tr {
            top: -6px;
            right: -6px;
        }

        .corner-bl {
            bottom: -6px;
            left: -6px;
        }

        .corner-br {
            bottom: -6px;
            right: -6px;
        }

        /* 方法二：使用CSS渐变背景 */
        .css-method {
            position: relative;
            margin-top: 80px;
        }

        .css-gradient-wrapper {
            position: relative;
            width: 400px;
            height: 300px;
            background-color: #2a2a2a;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 18px;
        }

        .css-gradient-wrapper::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                /* 顶边线 */
                linear-gradient(to right, 
                    rgba(255, 51, 51, 1) 0%, 
                    rgba(255, 51, 51, 0.8) 25%, 
                    rgba(255, 51, 51, 0.6) 50%, 
                    rgba(255, 51, 51, 0.4) 75%, 
                    rgba(255, 51, 51, 0.2) 100%
                ) top left,
                /* 右边线 */
                linear-gradient(to bottom, 
                    rgba(255, 51, 51, 0.8) 0%, 
                    rgba(255, 51, 51, 0.6) 25%, 
                    rgba(255, 51, 51, 0.4) 50%, 
                    rgba(255, 51, 51, 0.2) 75%, 
                    rgba(255, 51, 51, 0.1) 100%
                ) top right,
                /* 底边线 */
                linear-gradient(to left, 
                    rgba(255, 51, 51, 0.1) 0%, 
                    rgba(255, 51, 51, 0.2) 25%, 
                    rgba(255, 51, 51, 0.3) 50%, 
                    rgba(255, 51, 51, 0.4) 75%, 
                    rgba(255, 51, 51, 0.5) 100%
                ) bottom right,
                /* 左边线 */
                linear-gradient(to top, 
                    rgba(255, 51, 51, 0.5) 0%, 
                    rgba(255, 51, 51, 0.6) 25%, 
                    rgba(255, 51, 51, 0.7) 50%, 
                    rgba(255, 51, 51, 0.8) 75%, 
                    rgba(255, 51, 51, 0.9) 100%
                ) bottom left;
            background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
            background-repeat: no-repeat;
            pointer-events: none;
        }

        /* 方法三：使用伪元素实现线条渐变 */
        .pseudo-method {
            margin-top: 80px;
        }

        .pseudo-wrapper {
            position: relative;
            width: 400px;
            height: 300px;
            background-color: #2a2a2a;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 18px;
        }

        /* 顶边线 */
        .pseudo-wrapper::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(to right, 
                rgba(255, 51, 51, 1) 0%, 
                rgba(255, 51, 51, 0.1) 100%
            );
        }

        /* 右边线 */
        .pseudo-wrapper::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 2px;
            height: 100%;
            background: linear-gradient(to bottom, 
                rgba(255, 51, 51, 1) 0%, 
                rgba(255, 51, 51, 0.1) 100%
            );
        }

        /* 底边线和左边线需要额外元素 */
        .line-bottom,
        .line-left {
            position: absolute;
        }

        .line-bottom {
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(to right, 
                rgba(255, 51, 51, 0.1) 0%, 
                rgba(255, 51, 51, 1) 100%
            );
        }

        .line-left {
            top: 0;
            left: 0;
            width: 2px;
            height: 100%;
            background: linear-gradient(to bottom, 
                rgba(255, 51, 51, 1) 0%, 
                rgba(255, 51, 51, 0.1) 100%
            );
        }

        /* 方法四：完整的四角箭头 + 正方形 + 连线渐变组合 */
        .complete-method {
            margin-top: 80px;
        }

        .complete-wrapper {
            position: relative;
            width: 400px;
            height: 300px;
            background-color: #2a2a2a;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 18px;
        }

        /* 四角箭头 */
        .arrow-corner {
            position: absolute;
            width: 30px;
            height: 30px;
        }

        .arrow-tl {
            top: 0;
            left: 0;
            border-top: 2px solid #f44;
            border-left: 2px solid #f33;
        }

        .arrow-tr {
            top: 0;
            right: 0;
            border-top: 2px solid #f33;
            border-right: 2px solid #f33;
        }

        .arrow-bl {
            bottom: 0;
            left: 0;
            border-left: 2px solid #f33;
            border-bottom: 2px solid #f33;
        }

        .arrow-br {
            bottom: 0;
            right: 0;
            border-right: 2px solid #f33;
            border-bottom: 2px solid #f33;
        }

        /* 四角小正方形 */
        .complete-square {
            position: absolute;
            width: 8px;
            height: 8px;
            background-color: #ff6666;
            border: 1px solid #f33;
        }

        .square-tl {
            top: 11px;
            left: 11px;
        }

        .square-tr {
            top: 11px;
            right: 11px;
        }

        .square-bl {
            bottom: 11px;
            left: 11px;
        }

        .square-br {
            bottom: 11px;
            right: 11px;
        }
    </style>
</head>
<body>
    <div class="title">四角正方形连线渐变效果实现方案</div>
    
    <!-- 方法一：SVG实现连线渐变 -->
    <div class="method-title">方法一：SVG实现连线渐变（最精确）</div>
    <div class="container svg-method">
        <svg class="svg-overlay" viewBox="0 0 400 300">
            <defs>
                <linearGradient id="topGradient" x1="0%" y1="0%" x2="100%" y2="0%">
                    <stop offset="0%" style="stop-color:#f33;stop-opacity:1" />
                    <stop offset="100%" style="stop-color:#f33;stop-opacity:0.1" />
                </linearGradient>
                <linearGradient id="rightGradient" x1="0%" y1="0%" x2="0%" y2="100%">
                    <stop offset="0%" style="stop-color:#f33;stop-opacity:1" />
                    <stop offset="100%" style="stop-color:#f33;stop-opacity:0.1" />
                </linearGradient>
                <linearGradient id="bottomGradient" x1="100%" y1="0%" x2="0%" y2="0%">
                    <stop offset="0%" style="stop-color:#f33;stop-opacity:1" />
                    <stop offset="100%" style="stop-color:#f33;stop-opacity:0.1" />
                </linearGradient>
                <linearGradient id="leftGradient" x1="0%" y1="100%" x2="0%" y2="0%">
                    <stop offset="0%" style="stop-color:#f33;stop-opacity:1" />
                    <stop offset="100%" style="stop-color:#f33;stop-opacity:0.1" />
                </linearGradient>
            </defs>
            <!-- 连接线 -->
            <line x1="6" y1="6" x2="394" y2="6" stroke="url(#topGradient)" stroke-width="2"/>
            <line x1="394" y1="6" x2="394" y2="294" stroke="url(#rightGradient)" stroke-width="2"/>
            <line x1="394" y1="294" x2="6" y2="294" stroke="url(#bottomGradient)" stroke-width="2"/>
            <line x1="6" y1="294" x2="6" y2="6" stroke="url(#leftGradient)" stroke-width="2"/>
        </svg>
        <div class="corner-square corner-tl"></div>
        <div class="corner-square corner-tr"></div>
        <div class="corner-square corner-bl"></div>
        <div class="corner-square corner-br"></div>
        内容区域 - SVG方法
    </div>

    <!-- 方法二：CSS渐变背景 -->
    <div class="css-method">
        <div class="method-title">方法二：CSS多重背景渐变</div>
        <div class="css-gradient-wrapper">
            <div class="corner-square corner-tl"></div>
            <div class="corner-square corner-tr"></div>
            <div class="corner-square corner-bl"></div>
            <div class="corner-square corner-br"></div>
            内容区域 - CSS渐变
        </div>
    </div>

    <!-- 方法三：伪元素实现 -->
    <div class="pseudo-method">
        <div class="method-title">方法三：伪元素 + 额外div</div>
        <div class="pseudo-wrapper">
            <div class="line-bottom"></div>
            <div class="line-left"></div>
            <div class="corner-square corner-tl"></div>
            <div class="corner-square corner-tr"></div>
            <div class="corner-square corner-bl"></div>
            <div class="corner-square corner-br"></div>
            内容区域 - 伪元素
        </div>
    </div>

    <!-- 方法四：完整组合效果 -->
    <div class="complete-method">
        <div class="method-title">方法四：四角箭头 + 正方形 + 连线渐变组合</div>
        <div class="complete-wrapper">
            <!-- SVG连线渐变 -->
            <svg class="svg-overlay" viewBox="0 0 400 300">
                <defs>
                    <!-- 从上到下的整体渐变 -->
                    <linearGradient id="topToBottomGradient" x1="0%" y1="0%" x2="0%" y2="100%">
                        <stop offset="0%" style="stop-color:#f33;stop-opacity:1" />
                        <stop offset="25%" style="stop-color:#f33;stop-opacity:0.8" />
                        <stop offset="50%" style="stop-color:#f33;stop-opacity:0.6" />
                        <stop offset="75%" style="stop-color:#f33;stop-opacity:0.4" />
                        <stop offset="100%" style="stop-color:#f33;stop-opacity:0.2" />
                    </linearGradient>
                </defs>
                <!-- 连接线形成闭合回路，使用统一的从上到下渐变 -->
                <path d="M 20 20 L 380 20 L 380 280 L 20 280 Z" 
                      fill="none" 
                      stroke="url(#topToBottomGradient)" 
                      stroke-width="1.5"/>
            </svg>
            <!-- 四角小正方形 -->
            <div class="complete-square square-tl"></div>
            <div class="complete-square square-tr"></div>
            <div class="complete-square square-bl"></div>
            <div class="complete-square square-br"></div>
        </div>
    </div>

    <div style="color: #fff; text-align: center; margin-top: 50px; font-size: 14px;">
        <p>四种实现方案特点：</p>
        <p><strong>方法一</strong>：SVG实现，渐变效果最精确，支持复杂路径</p>
        <p><strong>方法二</strong>：纯CSS实现，性能好，但渐变控制相对有限</p>
        <p><strong>方法三</strong>：伪元素实现，兼容性好，易于理解</p>
        <p><strong>方法四</strong>：完整组合，包含箭头、正方形和渐变连线</p>
    </div>
</body>
</html>